<template>
  <page-container title="订单详情">
    <view class="order-details">
      <view class="detail-card">
        <view class="detail-item">
          <text class="label">商家名称：</text>
          <text class="value">{{orderInfo.title}}</text>
        </view>
        <view class="detail-item">
          <text class="label">实际付款：</text>
          <text class="value">￥{{orderInfo.actualPrice}} + {{orderInfo.points}}积分</text>
        </view>
        <view class="detail-item">
          <text class="label">订单编号：</text>
          <text class="value">{{orderInfo.orderNo}}</text>
        </view>
        <view class="detail-item">
          <text class="label">支付时间：</text>
          <text class="value">{{orderInfo.consumeTime}}</text>
        </view>
        <view class="detail-item">
          <text class="label">订单状态：</text>
          <text class="value">{{getStatusText(orderInfo.status)}}</text>
        </view>
      </view>

      <view class="action-bar" v-if="orderInfo.status === OrderStatus.PENDING_COMMENT">
        <view class="action-btn" @click="gotoComment">去评论</view>
      </view>
    </view>
  </page-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import PageContainer from '@/moduleC/components/layout/PageContainer.vue'
import { OrderItem, OrderStatus } from '@/moduleC/types/order'
import { api } from '@/moduleC/api'
import store from '@/moduleC/store'

@Component({
  components: {
    PageContainer
  }
})
export default class OrderDetails extends Vue {
  readonly OrderStatus = OrderStatus

  async onLoad(options: { id: string }) {
	  
    // await this.loadOrderDetail(options.id)
  }

  getStatusText(status: OrderStatus): string {
    switch (status) {
      case OrderStatus.COMPLETED:
        return '已完成'
      case OrderStatus.PENDING_COMMENT:
        return '待评论'
      case OrderStatus.COMMENTED:
        return '已评论'
      default:
        return ''
    }
  }
	get orderInfo () : any{
		return  store.state.orderDetail
	}
  private async loadOrderDetail(id: string) {
    uni.showLoading({ title: '加载中' })
    try {
		// this.orderInfo = store.state.orderDetail;
      // const res = await api.getOrderDetail(id)
      // if (res.code === 0 && res.data) {
      //   this.orderInfo = res.data
      // } else {
      //   uni.showToast({
      //     title: '订单不存在',
      //     icon: 'none'
      //   })
      //   setTimeout(() => {
      //     uni.navigateBack()
      //   }, 1500)
      // }
    } finally {
      uni.hideLoading()
    }
  }

  gotoComment() {
    if (!this.orderInfo) return
    uni.setStorageSync('_orderInfo', this.orderInfo)
    uni.navigateTo({
      url: '/pages/comment/add'
    })
  }
}
</script>

<style lang="scss" scoped>
.order-details {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 12px;
	position: relative;
	z-index: 11;
  .detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;

    .detail-item {
      margin-bottom: 12px;
      font-size: 14px;
      
      .label {
        color: #666;
        margin-right: 8px;
      }
      
      .value {
        color: #333;
        font-weight: 500;
      }
    }
  }

  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-end;

    .action-btn {
      width: 120px;
      height: 36px;
      background: #43d534;
      border-radius: 18px;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style> 